<template>
    <div class="home">
        <el-tree
            :data="treeData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
        >
            <template #default="{ node, data }">
            <span class="custom-tree-node">
                 <span @dblclick.stop="editLabel(data, node)"
                        v-if="isEdit !== data.id"
                 >{{ node.label }}</span>
                <span class="svg-box">
                    <el-input v-model.trim="inputLabel"
                              v-show="isEdit === data.id"
                              :ref="(el) => {treeRef(el,node.id)}"
                              @blur="inputBlur($event,data)"
                    ></el-input>
                    <svg @click="append(data)" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                         viewBox="0 0 12 12" data-v-78baa106=""
                         style="cursor: pointer;">
                        <path id="icon"
                              d="M70,78.018a6,6,0,1,1,4.241-1.757A5.962,5.962,0,0,1,70,78.018Zm0-11.139a5.141,5.141,0,1,0,3.637,1.506A5.11,5.11,0,0,0,70,66.879Zm3,4.709H70.429V69a.429.429,0,1,0-.857,0v2.583H67a.431.431,0,0,0,0,.861h2.572v2.583a.429.429,0,1,0,.857,0V72.448H73a.43.43,0,0,0,0-.861Z"
                              transform="translate(-64 -66.018)" fill="#07c7a0"
                              data-v-78baa106=""></path>
                    </svg>
                     <svg style="cursor:pointer" @click="remove(node, data)" xmlns="http://www.w3.org/2000/svg"
                          width="25"
                          height="25" viewBox="0 0 12 12">
                        <path id="icon" class="cls-1"
                              fill="#07c7a0"
                              d="M70,78.018a6,6,0,1,1,4.241-1.757A5.962,5.962,0,0,1,70,78.018Zm0-11.139a5.141,5.141,0,1,0,3.637,1.506A5.11,5.11,0,0,0,70,66.879Zm3,4.709H67a.431.431,0,0,0,0,.861h6a.43.43,0,0,0,0-.861Z"
                              transform="translate(-64 -66.018)"/>
                    </svg>
                </span>
            </span>
            </template>
        </el-tree>
    </div>
</template>
<script setup>
import {ref, getCurrentInstance} from 'vue'
import {ElTree, ElInput} from 'element-plus'
const { proxy } = getCurrentInstance()
let treeData = ref([
    {
        "label": "一级菜单1",
        "id": "001",
        "children": [
            {
                "label": "二级菜单1",
                "id": "001001"
            }
        ]
    },
    {
        "label": "一级菜单2",
        "id": "002"
    }
])
let isEdit = ref('-1') //是否编辑
let inputLabel = ref('') //编辑的树名称
let treeList = []
const treeRef = (el,id) => {
    if(el){
        treeList[id] = el
    }
}
/**
 * @Author: zhangjinhao
 * @Date: 2023/9/15 16:11
 * @Describe: 双击名称
 */
const editLabel = (data,node) => {
    console.log(data,'==data')
    console.log(node,'==node')
    isEdit.value = data.id
    inputLabel.value = data.label
    treeList[node.id].focus()
}
/**
 * @Author: zhangjinhao
 * @Date: 2023/9/15 16:45
 * @Describe: 编辑框失去焦点
 */
const inputBlur = (el,data) => {
    console.log(el,'==el')
    console.log(data,'==data123')
    if(inputLabel.value === ''){
        proxy.$message.show('名称不能为空！','warning')
    }else{
        data.label = inputLabel.value
        //这里去更新你的数据
    }
    isEdit.value = '-1'
}
</script>
<script>
export default {
    name: 'HomeView',
}
</script>
<style lang="scss" scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;

    svg {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }
    :deep(.el-input){
        width: 150px;
        height: 25px;
    }
}
</style>
